<template>
	<view class="page">
		<view class="flex-col flex-auto group_2 space-y-40">
			<view class="flex-col justify-start items-start text-wrapper"><text class="font_1 text_3">请选择取消订单原因:</text></view>
			<view class="flex-col group_3">
				<view class="flex-col space-y-40" v-if="rule">
					<view class="flex-row items-center space-x-19" 
					  v-for="(item,i) in rule " :key="i"
					  @click="tapRule(i)"
					>
						<image class="image_4" :src="i===curRuleIdx? '/static/radio-checked.png': '/static/radio-checkun.png' " />
						<text class="font_2">{{item.name}}</text>
					</view>
					<!-- 
					<view class="flex-row items-center space-x-19">
						<image class="image_4" src="/static/ordercancel-ed.png" />
						<text class="font_2">行程改变</text>
					</view>
					<view class="flex-row items-center space-x-19">
						<image class="image_4" src="/static/ordercancel-un.png" />
						<text class="font_2">租车所需资料不全(除两证一卡)</text>
					</view>
					<view class="flex-row items-center space-x-19">
						<image class="image_5" src="/static/ordercancel-un.png" />
						<text class="font_2">门店无法提供车辆</text>
					</view>
					<view class="flex-row items-center space-x-18">
						<image class="image_5" src="/static/ordercancel-un.png" />
						<text class="font_2">服务不满意</text>
					</view>
					<view class="flex-row items-center space-x-18">
						<image class="image_5" src="/static/ordercancel-un.png" />
						<text class="font_2">重新预订订单</text>
					</view>
					<view class="flex-row items-center space-x-18">
						<image class="image_5" src="/static/ordercancel-un.png" />
						<text class="font_2">其他</text>
					</view>
				 -->
				</view>
				<!--
				<view class="flex-col section space-y-15">
					<text class="self-start font_2">取消规则</text>
					<view class="rich">
						<rich-text :nodes="content"></rich-text>
					</view>
					 
					<view>
						<text class="font_3">1、距离取车时间8小时以上，可免费取消</text>
						<text class="font_3">2、取车前8小时内，收取订单金额的50%作为违约金</text>
						<text class="font_3">3、超过取车时间取消的，收取订单总金额的100%作为违约金</text>
					</view>
					 
				</view>
				-->
				<submit-btn @submit="submit" ref="submitRef">
					<template v-slot:btns="{ isSubmitted }">
						<view class="flex-col justify-start items-center button" :class="{ disabled: isSubmitted }"><text class="text_4">提交</text></view>
					</template>
				</submit-btn>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	// watchEffect,
	reactive,
	toRefs,
	// computed,
	// watch,
	// nextTick,
	ref
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const cancel = defineComponent({
	setup(props: any, ctx: any) {
		const data: any = reactive({
			orderid:'',
			curRuleIdx:'',
			rule: [],
			// content:'',
		});
		onLoad((e) => {
			data.orderid = e.orderid;
			getConfig();
		});
		const getConfig = async () => {
			let res = await uni.$request('order.cancel_config');
			data.rule = res.data;
			// data.content = res.data.content;
		};
		const tapRule =(i)=>{
			data.curRuleIdx = i;
		}

		const submitRef: any = ref();
		const submit = async () => {
			if(data.curRuleIdx === ''){
				uni.$tools.msg('请选择取消原因')
				return;
			}
			const sendData={
				id:data.orderid,
				reason: data.rule[data.curRuleIdx].name
			}
			let res = await uni.$request('order.cancel',sendData)
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.navigateBack()
			},800)
		};

		return {
			...toRefs(data),
			tapRule,
			submitRef,
			submit,
		};
	}
});
export default cancel;
</script>


<style lang="scss">
.group_2 {
	padding: 16rpx 0 240rpx;
	overflow-y: auto;
	.text-wrapper {
		padding: 16rpx 0;
		background-color: #f7f7f7;
		.font_1 {
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_3 {
			margin-left: 30rpx;
			color: #333333;
			line-height: 25rpx;
		}
	}
	.group_3 {
		padding: 0 30rpx;
		.section {
			margin-top: 74rpx;
			padding: 30rpx 0 30rpx 28rpx;
			background-color: #f7f7f7;
			border-radius: 20rpx;
			.font_3 {
				font-size: 28rpx;
				font-family: Adobe Heiti Std;
				letter-spacing: 1.12rpx;
				line-height: 54rpx;
				color: #999999;
			}
		}
		.space-y-15 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-top: 15rpx;
			}
		}
		.button {
			margin-top: 236rpx;
			padding: 27rpx 0;
			background-color: #3e6fef;
			border-radius: 42.5rpx;
			.text_4 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: PingFang;
			}
		}
	}
}
.space-y-40 {
	& > view:not(:first-child),
	& > text:not(:first-child),
	& > image:not(:first-child) {
		margin-top: 40rpx;
	}
	.space-x-19 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 19rpx;
		}
		.image_4 {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.space-x-18 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 18rpx;
		}
	}
	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}
}
.space-y-40 {
	& > view:not(:first-child),
	& > text:not(:first-child),
	& > image:not(:first-child) {
		margin-top: 40rpx;
	}
	.space-x-19 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 19rpx;
		}
		.image_4 {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.space-x-18 {
		& > view:not(:first-child),
		& > text:not(:first-child),
		& > image:not(:first-child) {
			margin-left: 18rpx;
		}
	}
	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}
}
.font_2 {
	font-size: 28rpx;
	font-family: PingFang;
	letter-spacing: 1.12rpx;
	color: #333333;
}
</style>
